<template>
    <div id="index">
    
        <header>
            <mt-header fixed title="环裕金服"></mt-header>
        </header>
    
        <router-view></router-view>
    
        <footer>
            <Tabbar fixed v-model="selected">
                <TabItem id="home">
    
                    <img v-show="route === '/home'" slot="icon" src="../assets/images/Tabar/shouyeS@2x.png" alt="">
                    <img v-show="route !== '/home'" slot="icon" src="../assets/images/Tabar/shouye@2x.png" alt=""> 首页
    
                </TabItem>
                <TabItem id="video">
                    <img v-show="route === '/video'" slot="icon" src="../assets/images/Tabar/shixunS@2x.png" alt="">
                    <img v-show="route !== '/video'" slot="icon" src="../assets/images/Tabar/shixun@2x.png" alt=""> 视讯
                </TabItem>
                <TabItem id="living">
                    <img v-show="route === '/living'" slot="icon" src="../assets/images/Tabar/zhiboS@2x.png" alt="">
                    <img v-show="route !== '/living'" slot="icon" src="../assets/images/Tabar/zhibo@2x.png" alt=""> 直播
                </TabItem>
                <TabItem id="periodical">
                    <img v-show="route === '/periodical'" slot="icon" src="../assets/images/Tabar/qikanS@2x.png" alt="">
                    <img v-show="route !== '/periodical'" slot="icon" src="../assets/images/Tabar/qikan@2x.png" alt=""> 期刊
                </TabItem>
                <TabItem id="me">
                    <img v-show="route === '/me'" slot="icon" src="../assets/images/Tabar/woS@2x.png" alt="">
                    <img v-show="route !== '/me'" slot="icon" src="../assets/images/Tabar/wo@2x.png" alt=""> 我
                </TabItem>
    
            </Tabbar>
    
        </footer>
    
    
    
    
    </div>
</template>


<script>
    import {
        Tabbar,
        TabItem
    } from 'mint-ui';
    
    export default {
        data() {
            return {
                value: 'aaa',
                selected: '首页'
            }
        },
        methods: {
    
    
    
        },
        watch: {
    
            selected() {
                // console.log(this.selected)
                this.$router.push({
                    name: this.selected
                })
    
    
            }
    
    
        },
        components: {
            Tabbar,
            TabItem
    
        },
        created() {

    
        },
        computed: {
            route() {
                return this.$route.path;
            }
        }
    
    }
</script>



<style lang="scss">
    @import './Index.scss'
</style>